<!-- 个人中心 之 讲师个人信息-->
<template>
  <div style=" position: absolute;width: 100%;background-color: #F7F7F7;font-size: 14px">
    <div class="all">
      <span style="margin: 2% 0 0 2%; color: #d51423;float: left;">讲师信息</span><br><br><br>
      <div style=" float:left;width:100px;height:1.5px;background-color:#d51423;overflow:hidden;"></div>
      <div style=" float:left;width:1000px;height:1.5px;background-color:#F7F7F7;overflow:hidden;"></div>
      <div v-show="one">
        <div v-model="message" style="margin: 5% 0 0 5%">
          <div style="font-size: 12px;color: #d51423">
            <span>*设置修改的信息需要审核通过才能生效，若已经修改请耐心等待</span>
          </div>
          <div style="padding: 2% 0 0 0 ">
            <span>昵称：</span>
            <span>{{ message.uname }}</span><br>
          </div>
          <div style="padding: 4% 0 0 0 ">
            <span>简介：</span>
            <span class="xinxi">{{ message.uremark }}</span><br>
          </div>
          <div>
            <span style="padding: 6% 0 0 0 ">讲师头像：</span>
            <div style="padding-top: 2% ">
              <el-image style="width: 100px; height: 100px;" :src="message.uimage"></el-image>
            </div>
          </div>

          <div class="text-three">
            <button style="height: 46px" @click="upd()">修改</button>
          </div>
        </div>
      </div>

      <div v-show="two">
        <el-form style="margin: 2% 0 0 2%">
          <el-form-item label="讲师名称：">
            <el-input v-model.trim="updData.uname" style="width: 321px;height: 45px"></el-input>
          </el-form-item>
          <el-form-item label="简介：">
            <el-input style="margin: auto;width: 700px" type="textarea" :rows="2" v-model="updData.uremark">
            </el-input>
          </el-form-item>

          <el-form-item label="头像：" :inline="true">

            <el-upload
              class="avatar-uploader"
              action="http://localhost:8899/student/stu/user/getImgPath"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
              <el-image style="width: 100px; height: 100px;" :src="updData.uimage" v-if="updData.uimage"></el-image>
              <div style="margin: -60% 0 0 75%">
                <p style="color: #999;font-size: 12px;width: 200px;list-style-type: none;">*
                  图片尺寸为800px*800px，仅支持jpg、jpeg、png 格式，图片大小不超过2MB。</p>
              </div>
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>

          </el-form-item>
          <div class="text-three">
            <button style="height: 46px" @click="sub()">保存</button>
          </div>
        </el-form>
      </div>

    </div>
  </div>
</template>

<script>
  import qs from 'qs'

  export default {
    name: "TeacherInformation",
    data() {
      return {

        message: [],

        one: true,
        two: false,
        updData: [],
        imageUrl: ''
      }
    },
    mounted() {
      this.query(this.id)
    },
    methods: {

      //查询讲师信息
      query() {

       let uid= sessionStorage.getItem("uid");
        this.$axios2.get("/student/stu/user/slectAll?uid="+uid).then(res => {
          console.log(res.data);
        //  res.data.forEach(r => {
            this.message = res.data;
          })
        //})
      },
      upd() {
        this.one = false;
        this.two = true;
        this.updData = this.message;
      },
      handleAvatarSuccess(res, file) {
        this.updData.uimage = res;
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === '';
        const isLt2M = file.size / 1024 / 1024 < 2;

       /* if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }*/
       // return isJPG && isLt2M;
      },
      sub() {
        this.$axios2.post("/student/stu/user/updStudent", qs.stringify(this.updData)).then(res => {
          if (res.data == 1) {
            alert("成功了")
          }
        })
      }
    }

  }

</script>


<style scoped>

  .text-three button {
    width: 320px;
    height: 36px;
    background-color: #D51423;
    border-radius: 7px;
    color: #FFFFFF;
    float: left;
    margin: 5% 0 0 10%;
  }

  .xinxi {
    word-break: normal;
    width: 500px;
    display: block;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow: hidden;
  }
</style>
